<script setup lang="ts">
import type {FormInstance, FormRules, TableInstance} from "element-plus";

const form=reactive({
  limit:20,
  page:1,
  search:'',
});
definePageMeta({
  layout:'admin',
  title:'域名列表',
});
const {data:list,refresh}=await useServerGet('/west/domainList',form)
const search=()=>{
  refresh&&refresh();
}
const renewShow=ref(false);
const renewDomain=reactive({domain:'',regyear:1,price:''});
const renew=async (row)=>{
  if(row.domain){
    renewDomain.domain=row.domain;
    renewDomain.regyear=1;
    renewShow.value=true
  }
  const {data,code}=await usePost('/west/getRenewPrice',renewDomain)
  if(code==200) {
    renewDomain.price = data.price;
  }else{
    ElMessage.error('查询价格失败,暂时无法续费');
  }
}
const renewDomainSubmit=async ()=>{
  const {code}=await usePost('/west/renewDomain',renewDomain)
  if(code==200){
    ElMessage.success('续费成功');
    renewShow.value=false;
    refresh&&refresh();
  }
}
const pushShow=ref(false);
const tableRef=ref<TableInstance>()
const push=(row,price)=>{
  pushDomain.domain=row.domain;
  pushDomain.domain_id=row.id;
  pushDomain.money=price??'';
  pushDomain.isZero=price==0;
  pushShow.value=true;
}
const pushRef=ref<FormInstance>();
const pushRules=reactive<FormRules>({
  domain:[
    {required:true,message:'请输入域名',trigger:'blur'}
  ],
  to_user_id:[
    {required:true,message:'请输入用户id',trigger:'blur'}
  ],
  money:[
    {required:true,message:'请输入金额',trigger:'blur'}
  ]
})
const pushDomain=reactive({domain:'',domain_id:'',to_user_id:'',money:'',isZero:false});
const pushDo=async ()=>{
  if(pushRef.value){
    pushRef.value?.validate(async (isValid,invalidFields)=>{
      if(isValid){
        if(selectList.value.length){
          pushDomain.domain=pushDomain.domain?.replace(/\n/g,',');
        }
        const {code}=await usePost('/west/sendPush',pushDomain)
        if(code==200){
          ElMessage.success('推送成功');
          selectList.value=[];
          tableRef?.value?.clearSelection();
          pushShow.value=false;
          refresh&&refresh();
        }
      }else {
        showFieldsError(invalidFields);
      }
    })
  }
}
const selectList=ref([]);
const batchPush=()=>{
  pushDomain.domain=selectList.value.map((item:any)=>item.domain).join('\n');
  pushDomain.domain_id=selectList.value.map((item:any)=>item.id).join(',');
  pushDomain.money=''
  pushDomain.isZero=false;
  pushShow.value=true;
}
const handleSelectionChange=(arr:any)=>{
  selectList.value=arr.map((item:any)=>({id:item.id,domain:item.domain}));
}
const pushOnce=async (row:any)=>{
  ElMessageBox.prompt('请输入价格','提示',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    inputPattern:/^\d+(\.\d{1,2})?$/,
    inputErrorMessage:'请输入数字',
    title:'发布一口价',
    center:true,
  }).then(async ({value})=>{
    const {code:code1,data}=await usePost('/fp/addGoods', {
      domain:row.domain,//gu.com
      price:value,//200
      register_time:row.regdate,//2018-08-08 08:08:08
      expiration_time:row.expdate,//2019-08-08 08:08:08
      authcode:'1',//转移权限码
    })
    if(code1===200){
      ElMessage.success('发布成功')
    }})
    refresh&&refresh();
}
</script>

<template>
<div>
  <el-card class="mt-4">
    <el-button :disabled="!selectList.length" type="primary" class="mb-2" @click="batchPush">批量PUSH</el-button>
    <div class="flex">
    <div class="w-1/4"><el-input v-model="form.search" placeholder="请输入域名" clearable></el-input></div>
   <div>
     <el-button class="ml-1" type="primary" @click="search">搜索</el-button>
   </div>
    </div>
  </el-card>
  <el-card class="mt-4">
    <el-table
        ref="tableRef"
        :data="list.data.list"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
          prop="id"
          label="ID"
          width="80"
      ></el-table-column>
      <el-table-column
          prop="domain"
          label="域名"
      ></el-table-column>
      <el-table-column
          prop="regdate"
          label="注册时间"
      ></el-table-column>
      <el-table-column
          prop="expdate"
          label="到期时间"
      ></el-table-column>
      <el-table-column
          prop="state"
          label="状态"
      ></el-table-column>
      <el-table-column
          prop="updated_at"
          label="更新时间"
      ></el-table-column>
      <el-table-column
          prop="created_at"
          label="创建时间"
      ></el-table-column>

      <el-table-column
          prop="address"
          label="操作"
      >
        <template #default="scope">

          <div class="">
            <el-dropdown>
              <el-button>
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item @click="renew(scope.row)">续费</el-dropdown-item>
<!--                  push-->
                  <el-dropdown-item @click="push(scope.row)">PUSH</el-dropdown-item>
                  <el-dropdown-item @click="push(scope.row,0)">0元PUSH</el-dropdown-item>
                  <el-dropdown-item><NuxtLink :to="`/admin/domain/push?domain=${scope.row.domain}`">PUSH列表</NuxtLink></el-dropdown-item>
                  <el-dropdown-item><span @click="pushOnce(scope.row)">发布一口价</span></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button class="ml-1" type="primary"><NuxtLink :to="`/admin/domain/dns?domain=${scope.row.domain}`">DNS解析</NuxtLink></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <MyPagination :total="list.data.total" :limit="form.limit" :page="form.page" @change="refresh" />
    <el-dialog v-model="renewShow" title="续费" width="400px" center>
      <el-form :model="renewDomain" label-width="80" class="w-[300px] mx-auto">
        <el-form-item label="域名">
          <el-input v-model="renewDomain.domain" readonly></el-input>
        </el-form-item>
        <el-form-item label="续费年限">
          <div class="flex">
            <div class="w-[150px]">
              <el-select v-model="renewDomain.regyear" placeholder="请选择续费年限" @change="renew">
                <el-option :label="`${item}年`" :value="item" v-for="item in 10"></el-option>
              </el-select>
            </div>
            <div>
              <span class="ml-2 text-red-400" v-if="renewDomain.price">¥{{renewDomain.price}}</span>
            </div>
          </div>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="renewDomainSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="pushShow" :title="pushDomain.isZero?'域名0元PUSH':'域名PUSH'" width="350px" center>
      <el-form ref="pushRef" :model="pushDomain" :rules="pushRules" label-width="100" class="w-[250px] mx-auto">
        <el-form-item label="域名" prop="domain">
          <el-input v-model="pushDomain.domain" type="textarea" readonly></el-input>
        </el-form-item>
        <el-form-item label="推送给用户id" prop="to_user_id">
          <el-input v-model="pushDomain.to_user_id"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="money" v-if="!pushDomain.isZero">
          <el-input v-model="pushDomain.money"></el-input>
        </el-form-item>
        <el-form-item v-if="!pushDomain.isZero">
          <div>
            <div class="text-xs text-red-400 mb-1">1.发起方带价push域名平台收取10%手续费</div>
            <div class="text-xs text-red-400">2.任何要求0元push域名需谨慎操作，预防诈骗切记。</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pushDo">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</div>
</template>

<style scoped lang="scss">

</style>